<template>
  <view class="map-container">
    <div id="container">
      
    </div>
    <view class="floating_window">
      <image :src="$store.state.imgBaseUrl + '/findShop/myposition.png'" mode="" class="myposition_img" @click="toLocation"></image>
      <image :src="$store.state.imgBaseUrl + '/findShop/openmap.png'" mode="" class="openmap_img" @click="gotoMap"></image>
    </view>
    
  </view>
</template>

<script>
var map;
var marker;
var geocoder;
var infoWindow
export default {
  props: {
    opt: {
      type: Object,
      required: true,
      default: function() {
        return {
          latitude: null,
          longitude: null
        }
      }
    }
  },
  data () {
    return {}
  },
  mounted () {
    let that = this;
    window.onLoad = function () {
      that.toLocation();
      // map = new AMap.Map('container', {
      //   zoom: 18,
      //   center: [that.opt.longitude, that.opt.latitude]
      // });
      // marker = new AMap.Marker({
      //   map: map,
      //   position:[that.opt.longitude, that.opt.latitude]
      // })
      // marker.markOnAMAP({
      //   position:marker.getPosition()
      // })
      // marker.setLabel({
      //   offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
      //   content: "点击Marker打开高德地图"
      // });
      //  marker.on('click',function(e){
      //   marker.markOnAMAP({
      //       position:marker.getPosition()
      //   })
      // });
      // marker.markOnAMAP({
      //   position: marker.getPosition(),
      //   // name:'首开广场'//name属性在移动端有效
      // })
    }
    var url = 'https://webapi.amap.com/maps?v=1.4.15&key=42f98d79c8315210186ad2e405eef0ea&callback=onLoad';
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi); 
  },
  methods: {
    gotoMap () {
      marker.markOnAMAP({
        position:marker.getPosition()
      })
    },
    toLocation () {
      let that = this;
      map = new AMap.Map('container', {
        zoom: 18,
        center: [that.opt.longitude, that.opt.latitude]
      });
      AMap.plugin(['AMap.Geocoder', 'AMap.InfoWindow'],function() {//异步加载插件
        geocoder = new AMap.Geocoder({
          radius: 1000 //范围，默认：500
        });
        marker = new AMap.Marker();
        infoWindow = new AMap.InfoWindow({
          anchor: 'bottom-center',
          offset: new AMap.Pixel(0, -40)
        });
        that.regeoCode();
      });
    },
    regeoCode () {
      let that = this;
      map.add(marker);
      marker.setPosition([that.opt.longitude, that.opt.latitude]);
      geocoder.getAddress([that.opt.longitude, that.opt.latitude], function(status, result) {
        if (status === 'complete' && result.regeocode) {
          var address = result.regeocode.formattedAddress;
          infoWindow.setContent('<span style="font-size:11px;">' + address + '</span>');
          infoWindow.open(map, [that.opt.longitude, that.opt.latitude]);
        } else {
          console.log('根据经纬度查询地址失败')
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .map-container {
    position: relative;
    #container {
      width: 100%;
      min-height: 100vh;
      // height: calc(100vh - 50px);
    }
    .floating_window {
      position: absolute;
      bottom: 20rpx;
      right: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      image {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 30rpx;
      }
      .myposition_img {
        
      }
      .openmap_img {
        
      }
    }
    
  }
  
</style>
